<template>
  <view class="content">
    <!--    <view class="tranInfo">
          本公文于 <span>{{prevDate}}</span> 由  <span>{{prevUser}}</span> 处转来
        </view>-->


    <view class="form-row">
      <view class="flex-two">
        <view class="jjzy" v-if="detailObj1.detailObj.importStatus == '1'">
          <span class="form-border-red">紧急重要</span>
        </view>
      </view>
      <view class="flex-one flex-block flex-end column-block column-none">
        <text class="text-green">密级</text>
        <text class="margin-left10">{{this.dict.getDictNameByDictCode('mj', detailObj1.detailObj.secrecyLevel)||'无'}}</text>
      </view>
      <view class="flex-one flex-block flex-end column-block column-none">
        <text class="text-green">紧急程度</text>
        <text class="margin-left10">{{this.dict.getDictNameByDictCode('gwfdjjcd', detailObj1.detailObj.emergencyLevel)}}</text>
      </view>
    </view>


    <view class="form-row">
      <view class="flex-one flex-block">
        <view class="column-block column-none">
          <text class="head-title">{{ titleUnit }}</text>
        </view>
      </view>
    </view>
    <!--发文字号-->
    <view class="column-block column-none">
      <text class="text-green">发电字号</text>
      <text class="margin-left10">{{detailObj1.detailObj.fdWord}}</text>
      <text v-if="this.util.isNotEmpty(detailObj1.detailObj.fdYear)">〔{{detailObj1.detailObj.fdYear}}〕{{detailObj1.detailObj.fdNum}}<text class="text-green margin-left10">号</text></text>

    </view>

    <view class="form-border">
      <view class="form-row">
        <view class="flex-one column-block column-right column-bottom" style="min-height: 160rpx;">
          <view class="text-green">签发</view>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['jldReview'] != undefined">
            <view class="opinion" v-for="item in detailObj1.opinion.jldReview">
              <view class="opinion-left">{{item.opinion}}</view>
              <view class="opinion-right">
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <text v-else class="opinion-user">{{item.userName}}</text>
                <text class="opinion-date">{{item.approvalTime}}</text>
              </view>
            </view>
          </template>

        </view>
        <view class="flex-one column-block column-bottom">
          <view class="">
            <view class="text-green">会签</view>
            <template v-if="signList != null && signList.length > 0">
              <view v-for="item in signList">
                <view>{{item.name}}（{{item.state}}）</view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <view class="text-green">落实领导审签意见</view>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['lsldsqReview'] != undefined">
            <view class="opinion" v-for="item in detailObj1.opinion.lsldsqReview">
              <view class="opinion-left">{{item.opinion}}</view>
              <view class="opinion-right">
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <text v-else class="opinion-user">{{item.userName}}</text>
                <text class="opinion-date">{{item.approvalTime}}</text>
              </view>
            </view>
          </template>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-two column-block column-bottom">
          <text class="text-green">承办单位</text>
          <view>{{detailObj1.detailObj.drafterDeptName}}</view>
        </view>
        <view class="flex-two column-block column-bottom">
          <text class="text-green">拟稿人</text>
          <view>{{detailObj1.detailObj.drafterName}}</view>
        </view>
        <view class="flex-two column-block column-bottom">
          <text class="text-green">
            联系电话</text>
          <view>{{detailObj1.detailObj.drafterPhone}}</view>
        </view>
        <view class="flex-two column-block column-bottom">
          <text class="text-green">保存期限</text>
          <view>{{this.dict.getDictNameByDictCode('bgqx', detailObj1.detailObj.storagePeriod)}}</view>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one flex-column">
          <view class="flex-row">
            <view class="flex-one column-block column-right column-bottom">
              <view class="text-green">处室审核</view>
              <template v-if="detailObj1.opinion != null && detailObj1.opinion['chushiReview'] != undefined">
                <view class="opinion" v-for="item in detailObj1.opinion.chushiReview">
                  <view class="opinion-left">{{item.opinion}}</view>
                  <view class="opinion-right">
                    <!-- base64签名图片 -->
                    <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                    <text v-else class="opinion-user">{{item.userName}}</text>
                    <text class="opinion-date">{{item.approvalTime}}</text>
                  </view>
                </view>
              </template>
            </view>
          </view>
          <view class="flex-row">
            <view class="flex-one column-block column-right column-bottom">
              <text class="text-green">主送、抄送</text>
              <text class="margin-left10">{{detailObj1.detailObj.mainTo}}</text>
            </view>
          </view>
        </view>
        <view class="form-row">
          <view class="flex-one column-block column-bottom">
            <view class="text-green">部门负责人审签</view>
            <template v-if="detailObj1.opinion != null && detailObj1.opinion['sldReview'] != undefined">
              <view class="opinion" v-for="item in detailObj1.opinion.sldReview">
                <view class="opinion-left">{{item.opinion}}</view>
                <view class="opinion-right">
                  <!-- base64签名图片 -->
                  <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                  <text v-else class="opinion-user">{{item.userName}}</text>
                  <text class="opinion-date">{{item.approvalTime}}</text>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <text class="text-green">是否公开</text>
          <text class="margin-left10">{{this.dict.getDictNameByDictCode('infopublic',detailObj1.detailObj.infoDisclosure)}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <text class="text-green">不公开理由</text>
          <text class="margin-left10">{{detailObj1.detailObj.nopublicReason}}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <text class="text-green">文件属性</text>
          <text class="margin-left10">{{this.dict.getDictNameByDictCode('fileAttribute',detailObj1.detailObj.fileAttribute)}}</text>
        </view>
      </view>


      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <van-checkbox v-model="detailObj1.detailObj.isPolicy == 1" :label-disabled="true" icon-size="14"
                        shape="square"><text class="text-green">是否为重要政策性文件</text></van-checkbox>
        </view>
        <view class="flex-one column-block column-bottom">
          <van-checkbox v-model="detailObj1.detailObj.isInterpret == 1" :label-disabled="true" icon-size="14"
                        shape="square"><text class="text-green">是否有解读方案</text></van-checkbox>
        </view>
        <view class="flex-one column-block column-bottom">
          <van-checkbox v-model="detailObj1.detailObj.isLegal == 1" :label-disabled="true" icon-size="14"
                        shape="square"><text class="text-green">是否有文件合法性审查结果</text></van-checkbox>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <view class="text-green">综合司审核</view>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['zhsshReview'] != undefined">
            <view class="opinion" v-for="item in detailObj1.opinion.zhsshReview">
              <view class="opinion-left">{{item.opinion}}</view>
              <view class="opinion-right">
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <text v-else class="opinion-user">{{item.userName}}</text>
                <text class="opinion-date">{{item.approvalTime}}</text>
              </view>
            </view>
          </template>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <text class="text-green">标题</text>
          <text class="margin-left10">{{detailObj1.detailObj.title}}</text>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <text class="text-green">拟稿说明</text>
          <text class="margin-left10">{{detailObj1.detailObj.description}}</text>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one column-block column-bottom">
          <text class="text-green">正文</text>
          <view class="opinion" v-if="detailObj1.detailBody !=null">
            <view class="opinion-right" v-for="(item,index) in detailObj1.detailBody.doc" :key="index">
              <text>{{item.attachName}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one">
          <view class="column-block column-none">
            <text class="text-green">附件</text>
            <view class="opinion" v-if="detailObj1.detailAttachment != undefined &&detailObj1.detailAttachment.length>0 ">
              <view class="opinion-right" v-for="(item,index) in detailObj1.detailAttachment" :key="index">
                <text>{{item.attachName}}</text>
              </view>
            </view>
          </view>
          <view class="column-block column-none">
            <text class="text-green">背景公文</text>
            <view class="opinion" v-if="detailObj1.relation != undefined &&detailObj1.relation.length>0 ">
              <view class="opinion-right" v-for="(item,index) in detailObj1.relation" :key="index">
                <text>{{item.title}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="form-row">
      <view class="flex-one column-block column-none"></view>
    </view>
    <view class="form-border">
      <view class="form-row">
        <view class="flex-one column-block column-none">
          <text class="text-green">拟办意见</text>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['nibanReview'] != undefined">
            <view class="opinion" v-for="item in detailObj1.opinion.nibanReview">
              <view class="opinion-left">{{item.opinion}}</view>
              <view class="opinion-right">
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <text v-else class="opinion-user">{{item.userName}}</text>
                <text class="opinion-date">{{item.approvalTime}}</text>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "compo-read",
  props: {
    detailObj1: {
      detailObj:Object,       // 公文基本信息
      detailBody:Object,      // 正文
      detailAttachment:Object,// 附件
      relation:Object,        // 附加公文[{"id":"1c0962f8839d46f792f84e5c89c96f14","title":"ppap","relateDocId":"4ec205b8334446f9b932d0fcb3896bc8","proInstId":"4ec205b8334446f9b932d0fcb3896bc8"},{"id":"2f4aa437ecba4c748bff911f03667147","title":"py","relateDocId":"86d30c881c494b468534685bb0746174","proInstId":"86d30c881c494b468534685bb0746174"}]
      opinion:Object,         // 意见
    },
    proInstId: {
      type: String,
      default: ''
    },
    extendIdForRelate:{
      type: String,
      default: ''
    },
    fwWordId:{
      type: String,
      default: ''
    }
  },

  data() {
    return {
      prevDate: '',
      prevUser: '',
      signList: [], // 会签
      titleUnit:''//版式文件名称
    };
  },

  watch: {
    proInstId: {
      handler(nval, oval) {
        if (this.util.isNotEmpty(nval)) {
          // 获取传送信息
          // this.getPrevInfo(nval)
        }
      },
      immediate: true,
      deep: true
    },
    extendIdForRelate: {
      handler(nval, oval) {
        if (this.util.isNotEmpty(nval)) {
          // 获取会签信息
          this.getSignList(nval)
        }
      },
      immediate: true,
      deep: true
    },

  },

  mounted() {
    this.titleUnit = /*this.cache.get('userInfo').deptName+"*/"民航局发电稿纸"
  },

  methods: {
    // 获取传送信息
    getPrevInfo(proInstId) {
      let _this = this
      _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/component/workflow/workflowController/getPreviouProTrack`),
        method: 'get',
        params: {
          'systemKey': _this.cache.get('userInfo').systemKey,
          'systemFlag': _this.cache.get('userInfo').systemFlag,
          'proInstId': proInstId
        }
      }).then(({data}) => {
        if (data.code == 200) {
          _this.prevDate = data.data.createTime
          _this.prevUser = data.data.sendUserName
        }
      })
    },
    // 获取会签信息
    getSignList(proInstId) {
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/mhjcomponent/countersign/countersignController/countersign`),
        method: 'get',
        params: {
          'systemKey': this.cache.get('userInfo').systemKey,
          'systemFlag': this.cache.get('userInfo').systemFlag,
          'gongwenId': proInstId
        }
      }).then(({data}) => {
        if (data.code == 200) {
          this.signList = data.data
        }
      })
    },
  }



}
</script>

<style scoped>
.color-red{
  color: #FF0000;
}
.margin-top20{
  margin-top: 20rpx;
}
.margin-top30{
  margin-top: 30rpx;
}
.margin-left10{
  margin-left: 10rpx;
}
.margin-left20{
  margin-left: 20rpx;
}
.content {
  padding: 10rpx;
}
.tranInfo {
  display: flex;
  justify-content: flex-end;
  margin-right: 10rpx;
  font-size: 18rpx;
}
.tranInfo span {
  font-weight: 600;
  padding: 0 4rpx;
}
.head-title{
  padding: 10rpx 0;
  margin: 20rpx 0;
  letter-spacing: 10rpx;
  color: #39B54A;
  text-align: center;
  font-weight: bold;
  font-size: 36rpx;
}
.jjzy {
  margin: 26rpx 10rpx;
}
.jjzy span {
  color: #ed1c24;
  padding: 10rpx;
}


/*766*/
.form-border {
  border: 1rpx solid #39B54A;
}
.column-block, .column-row {
  padding: 18rpx 15rpx;
  border: 1rpx solid #39B54A;
  border-bottom: none;
  line-height: 38rpx;
  font-size: 26rpx;
}

.column-bottom, .column-right {
  border: none;
}

.column-bottom:before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 1rpx;
  background: #39B54A;
  bottom: 0;
  left: 0;
}

.column-right::after {
  content: "";
  display: block;
  width: 1rpx;
  height: 100%;
  background: #39B54A;
  position: absolute;
  top: 0;
  right: 0;
}
/*767*/
.form-border-red {
  border: 1rpx solid #ed1c24;
}
.form-border {
  border: 1rpx solid #39B54A;
}
.flex-row {
  display: flex;
  flex: 1;
}
.flex-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/*941*/
.form-row {
  display: flex;
  justify-content: center;
  flex: 1;
}


.column-left {
  border: none;
  border-left: 1rpx solid #39B54A;
}

.column-none {
  border: none;
}

.flex-one {
  flex: 1;
  position: relative;
}

.flex-two {
  flex: 2;
  position: relative;
}

.flex-three {
  flex: 3;
  position: relative;
}

.flex-four {
  flex: 4;
  position: relative;
}

.flex-five {
  flex: 5;
  position: relative;
}

.flex-six {
  flex: 6;
  position: relative;
}

.flex-seven {
  flex: 7;
  position: relative;
}

.flex-eight {
  flex: 8;
  position: relative;
}

.flex-nine {
  flex: 9;
  position: relative;
}

.flex-ten {
  flex: 10;
  position: relative;
}
.flex-eleven {
  flex: 11;
  position: relative;
}
.flex-twelve {
  flex: 12;
  position: relative;
}

.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-end {
  justify-content: flex-end;
}

/* 意见相关样式 */
.opinion{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 26rpx;
  line-height: 24px;

}

.opinion .opinion-left{
  text-align: left;
  color: #323233;
}
.opinion .opinion-right{
  float:right;
  text-align: right;
}
.opinion .opinion-right .opinion-user{
  font-weight: 400;
  color: #000000;
}
.opinion .opinion-right .opinion-date{
  color: #323233;
  margin-left: 20rpx;
}

</style>
